<template>
<el-dialog class="add-data-source" :append-to-body="true" :title="addForm.title" :visible.sync="addForm.show" width="750px" :close-on-click-modal="false">
    <el-form label-position="right" ref="addSourceForm" :model="addForm.form" :rules="rules" label-width="110px" @submit.native.prevent>
        <el-steps style="width:710px;" :active="status" finish-status="success">
            <el-step v-for="(item, i) in steps" :key="i" :title="item"></el-step>
        </el-steps>
        <component :is="componentId[status]" :form="addForm.form"></component>
    </el-form>
    <span v-show="status===0" slot="footer" class="dialog-footer">
      <el-button @click="addForm.show=false">关 闭</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave1">下一步</el-button>
    </span>
    <span v-show="status===1" slot="footer" class="dialog-footer">
      <el-button @click="nextStep(0)">上一步</el-button>
      <el-button type="primary" @click="handleSave2">下一步</el-button>
    </span>
    <span v-show="status===2" slot="footer" class="dialog-footer">
      <el-button @click="nextStep(1)">上一步</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave3">提 交</el-button>
    </span>
</el-dialog>
</template>

<script>
import {
    mapGetters,
    mapMutations
} from 'vuex'
import DataPreview from './DataPreview'
import DataHandle from './DataHandle'
import DataRead from './DataRead'
export default {
    name: 'AddSource',
    props: {
        addForm: {
            type: Object,
            required: true
        }
    },
    components: { DataPreview, DataHandle, DataRead },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    data () {
        return {
            componentId: ['data-read', 'data-preview', 'data-handle'],
            status: 0,
            steps: ['数据读取', '数据预览', '数据处理'],
            rules: {
                databaseSchema: [{
                    required: true,
                    message: '请选择数据库名',
                    trigger: 'change'
                }],
                dataType: [{
                    required: true,
                    message: '请选择数据类型',
                    trigger: 'change'
                }],
                characterEncoding: [{
                    required: true,
                    message: '请选择字符集编码',
                    trigger: 'change'
                }],
                fileType: [{
                    required: true,
                    message: '请选择文件类型',
                    trigger: 'change'
                }],
                parallelism: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请输入并行度'
                    },
                    { pattern: /^([1-9]\d{0,2}|1000)$/, message: '并行度范围必须是1-1000的整数' }
                ],
                filed: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入字段'
                }],
                sparkExecutionNumber: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入执行节点数量'
                }],
                sparkExecutionCores: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入每个执行节点线程数'
                }],
                sparkExecutionMemory: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入内存单位MB'
                }],
                sparkDriverCores: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入Driver节点线程数'
                }],
                sparkDriverMemory: [{
                    required: true,
                    trigger: 'blur',
                    message: '请输入内存单位MB'
                }],
                filePath: [{
                    required: true,
                    trigger: 'change',
                    message: '请输入HDFS路径'
                }],
                sourceId: [{
                    required: true,
                    trigger: 'change',
                    message: '请选择数据源'
                }],
                dataTable: [{
                    required: true,
                    trigger: 'change',
                    message: '请选择现有数据表'
                }],
                srcTableName: [{
                    required: true,
                    trigger: 'change',
                    message: '请选择该数据源下的数据表'
                }],
                fileList: [{
                    required: true,
                    trigger: 'change',
                    message: '请上传文件'
                }],
                tableName: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入数据表名'
                    },
                    { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '数据表名包含字母数字以及下划线，并以字母开头' }
                ],
                inputColumns: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请选择字段'
                    }
                ]
            }
        }
    },
    methods: {
        ...mapMutations({
            setPreviewData: 'common/setPreviewData'
        }),
        getPreviewData () {
            const { inputColumns, parallelism, conditionExp, databaseSchema, dataType, characterEncoding, columnDelimiter, filePath, limit, fileType, dateFormat, existsHeader, sourceId, srcTableName } = this.addForm.form
            let params = {
                characterEncoding,
                columnDelimiter,
                dateFormat,
                existsHeader,
                fileType,
                filePath,
                limit,
                projectId: this.projectId
            }
            let url = '/dataSource/file-upload/previewDataFile'
            if (dataType === 2) {
                url = '/dataSource/file-upload/previewDataTable'
                params = {
                    projectId: this.projectId,
                    sourceId,
                    tableName: srcTableName,
                    databaseSchema,
                    parallelism,
                    conditionExp,
                    inputColumns
                }
            }
            this.$post(url, params).then(res => {
                if (res) {
                    const { schema, fileSize, records } = res
                    this.setPreviewData({
                        cols: schema.length || 0,
                        fileSize,
                        records,
                        schema
                    })
                    this.nextStep(1)
                }
            })
        },
        nextStep (n) {
            this.status = n
        },
        handleSave1 () {
            this.$refs['addSourceForm'].validate((valid) => {
                if (valid) {
                    this.getPreviewData()
                } else {
                    return false
                }
            })
        },
        handleSave2 () {
            this.nextStep(2)
        },
        handleSave3 () {
            this.$refs['addSourceForm'].validate((valid) => {
                if (valid) {
                    this.$emit('save')
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.add-data-source {
    .el-form--label-right {
        height: 100%;
    }
    .el-dialog__body {
        height: 70vh !important;
    }
    .el-form-item__label {
        .tips-box1 {
            position: absolute;
            right: -8px;
        }
        position: relative;
        margin-right: 15px;
    }

    .el-steps {
        padding-bottom: 20px;
    }

    .el-textarea__inner {
        width: 320px !important;
    }

    .is-process {
        color: #606266;
        font-weight: 500;
    }

    .el-step__title {
        font-size: 14px;
    }

    .select-file-btn {
        margin-right: 10px;
    }

    .el-upload__tip {
        margin-top: -5px;
    }
    .my-tips {
        margin-top: 0;
    }

    .upload-box {
        display: flex;
        align-items: center;
        li {
            margin: 0;
        }
        .el-upload--text {
            display: flex;
            height: 32px;
        }
    }
    .last-form-item {
        display: flex;
        align-items: center;

        .el-form-item__label {
            padding-right: 10px;
        }
    }
    .data-read-item .el-form-item__content {
        height: 32px;
    }
    .el-table__header th {
        background: #f5f5f5;
    }
}
</style>
